<template>
	<view :class="currentTheme">
		<index-header :title="item.teamName" :offsetTop="offsetTop" :bgImg="item.image" height="520" isBack>
			<view slot="content" class="u-flex-1 u-position-relative header-container">
				<view class="u-position-relative header-content">
					<a-nabbar :isFixed="false" navBg="transparent" txtColor="white" />
					<view class="u-flex u-padding-left-32 u-padding-right-32 u-col-top ">
						<item-image :img="item.image" width="175" height="246"></item-image>
						<view class="u-flex-1 u-margin-left-24">
							<view class="u-flex u-margin-bottom-12">
								<view class="text-white u-font-36 text-bold u-line-2 u-flex-1">{{item.teamName}}</view>
								<view class="share u-position-relative">
									<u-icon name="zhuanfa" size="28" custom-prefix="custom-icon" color="#765CFE"></u-icon>
									<button open-type="share" class="open-share u-position-absolute"></button>
								</view>
							</view>
						
							<view class="tag u-flex u-flex-wrap">
								<view class="u-margin-right-10 u-margin-bottom-10 "
									v-for="(c,i) in item.categoryDescription" :key="i">
									<u-tag :text="c" size="mini" shape="circle" :bg-color="currentThemeObj.primary"
										:border-color="currentThemeObj.primary" color="white" />
								</view>
							</view>
							<view class="u-flex u-margin-top-6">
								<flex-text txt="价格" size="24" width="72" customClass="text-white"></flex-text>
								<view class="u-font-30 text-white">：<text class="u-font-24">¥</text>{{item.intoPayMoney}}元/人</view>
							</view>
							<view class="u-flex u-margin-top-6">
								<flex-text txt="游戏开始时间" size="24" width="145" customClass="text-white"></flex-text>
								<text class="u-font-24 text-white">：{{item.estimateTime | timeFormat}}</text>
							</view>
							<view class="u-flex u-margin-top-6"  v-if="item.completeTime">
								<flex-text txt="结束时间" size="24" width="145" customClass="text-white"></flex-text>
								<text class="u-font-24 text-white">：{{item.completeTime | timeFormat}}</text>
							</view>
							<view class="u-flex u-margin-top-14">
								<item-image type="1" :img="item.avatar" :size="42" :fade="false" />
								<text
									class="u-font-28 u-margin-left-10 u-line-1 username-text">{{item.createName || '' }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="header-box-border u-position-absolute"></view>
		</index-header>
		<view class="u-padding-left-32 u-padding-right-32">
			<view class="box-title u-font-32 text-bold u-margin-bottom-26">DM</view>
			<item-box padding="0">
				<view class="u-padding-left-32 u-padding-right-32 u-padding-top-20 u-padding-bottom-20 u-flex" v-if="item.dmUser">
					<item-image type="1" :img="item.dmUser.avatar" size="96" @click="getAvatarDetail(item.dmUser)"></item-image>
					<view class="u-margin-left-26 u-font-30 content-desc-item u-flex-1 u-line-2">{{item.dmUser.realName}}</view>
					<!-- <view v-if="isCreator&&item.status===0" class="changeDm" @click="changeDm">切换DM</view> -->
					<view class="u-font-24">
						<item-btn @click="changeDm"  v-if="isCreator&&item.status===0" width="160" height="60" 
						:bgColor="currentThemeObj.primary">切换DM
						</item-btn>
					</view>
					
				</view>
			</item-box>
			<view class="box-title u-font-32 text-bold u-margin-bottom-26 u-margin-top-24">玩家</view>
			<item-box padding="0">
				<view class="u-flex person-count-container u-border-bottom u-padding-left-32 u-padding-right-32">
					<u-icon name="renwu-ren" custom-prefix="index-custom-icon" size="31" color="#1a1a1a"></u-icon>
					<text class="u-font-24 u-margin-left-12">人数：</text>
					<view class="u-flex u-row-between u-flex-1">
						<view>
							<text class="u-font-40 text-color-txtTheme">{{participate}}</text>
							<text class="u-font-32">/{{item.people||0}}</text>
							<text class="u-font-24">人</text>
						</view>
						<view class="u-flex">
							<u-icon name="nan" custom-prefix="custom-icon" size="26" color="#765CFE"></u-icon>
							<text class="u-font-36 u-margin-left-10 text-color-txtTheme">{{manLen}}</text>
							<text class="u-font-30">/{{item.mpeople||0}}</text>
						</view>
						<view>
							<u-icon name="nv" custom-prefix="custom-icon" size="26"
								:color="currentThemeObj.themeSecondColor"></u-icon>
							<text class="u-font-36 u-margin-left-10 woman-class">{{womanLen}}</text>
							<text class="u-font-30">/{{item.people - item.mpeople||0}}</text>
						</view>
						<view>
							<item-btn v-if="item.isCrossTalk" width="143" height="42" bgColor="#F3EFFE">
								<text class="u-font-20 text-color-txtTheme">可反串</text>
							</item-btn>
						</view>
					</view>
				</view>
				<view  v-if="item.userSmallDtos&&item.userSmallDtos.length">
					<u-row>
						<u-col span="3" v-for="(item,index) in item.userSmallDtos" :key="index"
							@click="getAvatarDetail(item)">
							<view class="u-flex u-row-center u-flex-col">
								<view class="avatar u-flex u-row-center u-position-relative">
									<!-- <view v-if="item.userType==='lock'">
										<u-icon :name="item.gender==='男' ? 'nan' : 'nv'" custom-prefix="custom-icon"
											size="46" color="#fafafa"></u-icon>
										<view class="u-position-absolute right-avatar"
											:style="{backgroundColor:item.gender==='男' ? currentThemeObj.primary:currentThemeObj.themeSecondColor}">
											<u-icon name="suo" custom-prefix="index-custom-icon"
												size="10" color="white"></u-icon>
										</view>
									</view> -->
									<item-image showSex type="1" :img="item.avatar" :size="124" :sex-bg-color="item.gender==='男' ? currentThemeObj.primary:currentThemeObj.themeSecondColor"
										:sexIcon="item.gender==='男' ? 'man' : 'woman'" :fade="false"/>
								</view>
								<!-- 如果type=1 是线上组局  0为线下组局 -->
								<view class="u-margin-top-16" v-if="item.type==1">
									<view v-if="item.isRead" class="isread u-text-center">
										<text class="u-font-22 text-color-txtTheme">
											已准备
										</text>
										<u-icon name="dui" custom-prefix="custom-icon" size="22" :color="currentThemeObj.primary"></u-icon>
									</view>
									<view v-if="!item.isRead" class="unread u-text-center u-font-22 text-tips">待准备</view>
								</view>
							</view>
						</u-col>
					</u-row>
					<view class="u-font-22 text-color-txtTheme u-text-center u-padding-bottom-10 u-padding-top-20">点击头像可查看玩家信息</view>
				</view>
				<view class="box-title u-font-24 u-text-center u-padding-top-32 u-padding-bottom-10 " v-else>还没有加入组局</view>
				<view v-if="item.status===0" class="u-padding-32">
					<item-btn  @click="share" height="88" width="100%">邀请玩家</item-btn>
				</view>
				<view v-if="item.status===2"  class="u-text-center u-font-26 u-padding-top-8 u-padding-bottom-40 u-flex u-row-center">
					<text class="u-font-28 box-title text-bold">合计：</text>
					<money :price="allPrice" :color="currentThemeObj.primary" size="36"></money>
				</view>
			</item-box>
			<view class="u-margin-top-20">
				<item-box padding="28">
					<view v-if="!isCreator" class="u-font-24 u-margin-top-40 u-margin-bottom-40 u-text-center text-tips">
						当前DM不是你，没有操作权限
					</view>
					<view v-if="isCreator && item.status==0">
						<view  class="u-font-24 u-margin-top-40 u-margin-bottom-40 u-text-center text-tips">
							到达游戏开始时间后，人齐点开始游戏
						</view>
						<item-btn @click="startCar" :disabled="isFull" width="100%" height="88"
						:bgColor="isFull ? currentThemeObj.btnDisableBgcolor : currentThemeObj.primary">开始游戏</item-btn>
						<view class="u-margin-top-10">
							<item-btn :loading="outCarLoading" @click="closeCar('cancelCar',item)" width="100%" height="88" type="plain">取消组局</item-btn>
						</view>
					</view>
				</item-box>
			</view>
		</view>
		<!-- <view class="u-padding-32">
			
			<view class="u-margin-top-20">
				<item-box :padding="30">
					<view class="u-padding-top-30" v-if="item.userSmallDtos&&item.userSmallDtos.length">
						<item-box background="#292445">
							
							<view v-if="item.status===2" class="u-text-center u-font-26 u-padding-10">
								<text class="text-white">合计：</text><text class="text-color-765CFE">￥{{allPrice}}</text>
							</view>
						</item-box>
					</view>
				</item-box>
			</view>
			<view class="u-margin-top-20" >
				<item-box :padding="30">
					<view v-if="item.status===1" class="text-color-DEDEDE u-font-24 u-margin-top-45 u-margin-bottom-45 u-text-center">
						
						{{item.dmUid===loginForm.dmUid ? '此次组局已开始' : `此次组局由${item.dmUser.clerkRole}(${item.dmUser.nickname})操作`}}
					</view>
					<view v-if="item.status===2" class="text-color-DEDEDE u-font-24 u-margin-top-45 u-margin-bottom-45 u-text-center">此次组局已结束</view>
				</item-box>
			</view>
		</view> -->
		<!-- 玩家信息or店家信息弹框 -->
		<u-popup v-model="avatarPopFlag" mode="center" border-radius="26" width="578" closeable>
			<view class="background-color u-padding-40">
				<view class="u-flex ">
					<item-image :type="'1'" :img="showDetailItem.avatar" :size="100"/>
					<view class=" u-font-32 content-desc-item u-margin-left-40">{{showDetailItem.nickname}}</view>
				</view>

				<userLevel :item="showDetailItem.userGameLevel" v-if="showDetailItem.userGameLevel&&showDetailItem.userType=='player'"></userLevel>
				<view class="u-font-26 text-order-time u-margin-top-20 u-margin-bottom-20" v-else>已开场次：{{showDetailItem.userExtend&&showDetailItem.userExtend.openedNum}}次</view>

				<view class="u-font-24 u-margin-top-10 text-order-time u-flex u-margin-bottom-20" @click="copyWxId(showDetailItem.wxId)">
					<u-icon name="weixin-fill" size="35" :color="currentThemeObj.primary"></u-icon>
					<text class="u-margin-left-20">{{showDetailItem.wxId || '暂无'}}</text>
				</view>
				<view class="u-font-24 text-order-time u-flex" @click="callPhone(showDetailItem.phone)">
					<u-icon name="dianhua" size="35" custom-prefix="custom-icon" :color="currentThemeObj.primary"></u-icon>
					<text class="u-margin-left-20">{{showDetailItem.phone}}</text>
				</view>
				<view class="u-font-24 text-order-time u-margin-top-30">
					所在城市：{{showDetailItem.cityPath | cityPathFormat}}
				</view>
			</view>
		</u-popup>
		<model v-model="modelFlag" :show-title="false" 
		:show-cancel-button="!['rejectFlag','cancelCarFlag'].includes(modelType)" 
		:show-confirm-button="modelType!='confirmCar'" cancel-color="#333333" :confirm-color="currentThemeObj.primary" :content="closeModalTips" @confirm="confirmClose" @cancel="clearTime"/>
	</view>
	
</template>

<script>
	import {
		getDetail,
		customRequest,
		add
	} from '@/api/crud.js'
	import dayjs from 'dayjs'
	import gameManager from '@/mixins/gameManager.js'
	import model from '@/components/u-modal/u-modal.vue'
	import price from '@/components/price/price.vue'
	import larpDetail from '@/mixins/larpDetailMixins.js'
	import userLevel from '@/components/userHeader/userLevel.vue'
	import { BigNumber } from "bignumber.js";
	import indexHeader from '@/components/indexHeader/indexHeader.vue'
	export default {
		mixins: [gameManager,larpDetail],
		components: {
			model,price,userLevel,indexHeader
		},
		data() {
			return {
				apiModule: 'shopApi',
				item: {loading:true},
				avatarPopFlag: false,
				customStyle: {
					backgroundColor: '#765CFE',
					borderColor: 'none'
				},
				goonDis: {
					backgroundColor:'rgba(118,92,254,0.4)',
					borderColor:'none'
				},
				colHeight: 0,
				option: {},
				apiType: "gatherGame",
				showDetailItem: {
					cityPath:''
				},
				pageType:"carDetail",
				lockCarFlag:false,
				offsetTop: 0
			};
		},
		computed: {
			//是否为当前用户创建的
			
			isFull(){
				const isFull = this.userSmallDtos.length!==this.item.people
				return isFull
			},
			isAllRead(){
				if(this.item.type==1){ //type为1 是线下组局
					return this.userSmallDtos.every(val=>val.isRead)
				}
				return true;
			},
			isCreator(){
				return this.item.dmUid===this.loginForm.uid
			},
			allPrice(){
				const {type,intoPayMoney,onlineIntoPayMoney,people} = this.item;
				const price = type===0 ? BigNumber(intoPayMoney) : BigNumber(onlineIntoPayMoney);
				const plus = price.multipliedBy(people)
				return plus.toNumber();
			}
		},
		onLoad(option) {
			this.option = option;
		},
		onUnload() {
			uni.$off('lockCar')
		},
		async onShow() {
			await this.getTeamDetail()
			uni.$on('lockCar',res=>{
				this.setCarLock(true,res)
			})
			uni.$on('unLockCar',res=>{
				this.setCarLock(false,res)
			})
			if(this.isCity){
				getDetail({productId:this.item.productId}, 'product', this.apiModule, 'getCitys').then(data => {
					this.item.productCities = data;
				})
			}
		},
		onPageScroll(e) {
			this.offsetTop = e.scrollTop
		},
		methods: {
			getTeamDetail(){
				return getDetail({id:this.option.id}, this.apiType, this.apiModule, 'thirdGet').then(data => {
					data.teamName = data.name; //模板显示需要 所以要给name置空
					data.name = '';					
					this.item = data;
					this.item.categoryDescription = data.categoryDescription.split(',').splice(0,6)
					this.lockCarFlag = data.isLocked
					this.$u.mpShare = {
						title: data.teamName,
						imageUrl: this.imgFilter(data.image)
					}
				})
			},
			//锁车与解锁车
			setCarLock(flag,res){
				if(res.gatherGameId==this.option.id){ //当前车才提示
					const tips = flag ? '车门已焊死，禁止用户上下车' : '车门已解锁，可正常上下车';
					// this.modelType='rejectFlag'
					// this.modelFlag = true;
					this.$u.toast(tips)
					this.lockCarFlag = flag;
				}
			},
			getAvatarDetail(item,type) {
				if(item.userType=='lock'){
					this.$u.toast('发行已锁该车位')
					return false;
				}
				if(!item) return false;
				item.type = type;
				this.avatarPopFlag = true;
				this.showDetailItem = item;
			},
			startCar() {
				if(this.type===1&&!this.isAllRead){
					this.$u.toast('还有玩家没准备好');
					return false;
				}
				add(this.loginForm.uid + '', this.apiType, this.apiModule, 'startGame/' + this.item.id).then(res => {
					this.$u.toast('发车成功');
					setTimeout(()=>{
						this.$u.route({
							url: '/pagesA/carTime/gameTime',
							params: {
								id: this.item.id
							}
						})
					},1000)
				})
			},
			getDetail(){
				this.$u.route({
					url:"/pagesA/itemDetail/itemDetail",
					params:{
						id:this.item.productId,
						type:'game' //组局详情
					}
				})
			},
			cancelCarcallback(res){
				if(this.item.id===res.id){
					this.modelType = 'cancelCarFlag'
					this.modelFlag = true;
					this.closeModalTips = '该车已被取消'
				}
			},
			//自定义返回
			customBack(){
				if(this.option.type=='create'){
					//直接创建的则直接返回首页 否则返回上一页
					this.$u.route({
						type:"reLaunch",
						url:'/pages/index/index'
					})
					return false;
				}
				this.$u.route({
					type:"back"
				})
			},
			outCar(){
				this.$u.route({
					type:"back"
				})
			},
			//拨打电话
			callPhone(phoneNumber){
				if(!phoneNumber) return false;
				uni.makePhoneCall({phoneNumber});
			},
			//微信号
			copyWxId(wxId){
				if(!wxId) return false;
				uni.setClipboardData({
					data: wxId,
					success:()=>{
						this.$u.toast('复制成功')
					}
				});
			},
			//邀请玩家
			share(){
				const {id:teamId,productId,productName:name,type:isOnline,intoPayMoney,onlineIntoPayMoney} = this.item;
				const gamePrice = isOnline===1 ? onlineIntoPayMoney : intoPayMoney
				this.$u.route({
					url:'/pagesA/shareCar/shareCar',
					params:{
						teamId,
						productId,
						name,
						gamePrice,
						isOnline
					}
				})
			},
			//切换dm
			changeDm(){
				const {id,storeId,productId,dmUid,dmUser} = this.item;
				this.$u.route({
					url:'/pagesA/storeAddLarp/changeDM',
					params:{
						teamId:id,
						storeId,
						id:productId,
						dmUid,
						dmUsername:dmUser.nickname
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.header-box-border {
		background-color: var(--background-color);
		height: 25rpx;
		bottom: 0;
		left: 0;
		right: 0;
		border-radius: 40rpx 40rpx 0 0;
		z-index: 23;
	}
	
	.username-text {
		color: var(--background-second-color);
	}
	
	.header-container {
		height: 100%;
	
		&::after {
			content: '';
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			background-color: rgba($color: #000000, $alpha: 0.7);
			z-index: 21;
		}
	
		.header-content {
			z-index: 22;
		}
	}
	
	.person-count-container {
		height: 100rpx;
	}
	
	.padding-env {
		padding-bottom: calc(env(safe-area-inset-bottom) + 50px)
	}
	.avatar {
		width: 124rpx;
		height: 124rpx;
		border-radius: 50%;
		background-color: var(--background-second-color);
		margin: 24rpx 0 0;
	}
	.right-avatar {
		top: 8%;
		right: -3%;
		width: 30rpx;
		height: 30rpx;
		text-align: center;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 1rpx solid white;
	}
	.share {
		.open-share {
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			opacity: 0;
		}
	}
</style>
